<template>
	<view class="">
		<view v-if="isNefi == 1"
			style="width: 100%;height: 100vh;font-size: 40rpx;position: fixed;
			background-image:/static/work1.jpg;">
			<view class="" style="width: 100%;height: 100rpx;background-color: #F0F8FF;display: flex;justify-content: center;align-items: center;">
				请在PC端查看
			</view>
		</view>
		<image src="/static/work1.jpg" mode="" class="img_bg" style="top: 0;"></image>
		<view v-if="unckeck == 'NcZv1Q34eAuzhafz' && unckeck !== ''" style="z-index: 10; width: 100%; height: 500upx;  position: sticky;">
			<view class="" style="position: fixed;width: 100%;">
				<view class=" padding-t30 padding-b30" style="  text-align: center; width: 100%; height: 36upx;  color: #000000; background-color: #F0F8FF;">
					{{title}}
				</view>
				<view class="" style="position: fixed;">
					<video class=" " autoplay="true" :title="title" style=" z-index: 100; position: fixed; width: 100%; height: 405upx"
					 id="myVideo" :initial-time="initial_time" :src="url_now" controls show-center-play-btn :show-mute-btn='true'
					 @play="play" @pause="pause" @ended="ended" @waiting="waiting" enable-progress-gesture="false" @timeupdate="forbidDragProgress"></video>
				</view>
			</view>
		</view>
		<view class="card_list" v-if="unckeck == 'NcZv1Q34eAuzhafz' && unckeck !== ''">
			<view class="" style="text-align: center; ">
				课程列表
			</view>
			<view class="" style="">

				<view v-for="(item,index) in dataList" :key="index" @tap="toDetail(item)">

					<view class="display card1 border-bottom " style=" top: 10upx;  align-items:center;   justify-content:space-around;">
						<image src="../../../../static/work/video1.png" mode="" class="siz_img"></image>
						<view class="" style="font-size: 20upx;" :class="item.filename==title?'font_color':''">
							<view class="display" style="align-items:center; ">
								<view class="" style="margin-right: 12upx;" v-show="item.filename==title">
									当前播放
								</view>
								<view class="margin-r10" style="width: 80upx;" v-show="item.filename!=title">
								</view>
								<image src="../../../../static/work/start.png" style="width: 32upx; height: 32upx;" v-show="item.filename==title" mode=""></image>
								<image src="../../../../static/work/bofang.png" style="width: 32upx; height: 32upx;" v-show="item.filename!=title"
								 mode=""></image>
							</view>
						</view>
						<view class="">

						</view>
						<view class="">

						</view>
						<view class="">


						</view>
						<view class="">

						</view>
						<view class="">

						</view>
						<view :class="item.filename==title?'font_color':''">
							{{item.filename}}
						</view>
					</view>
				</view>

			</view>
		</view>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				unckeck: 'NcZv1Q34eAuzhafz',
				i_now: '',
				title: '',//文件名字
				url_now: '',
				initial_time: 0,
				seek: 0,
				nowTime: 0, //当前时间
				setterval: '',
				dataList: [{
						image: '/static/work/video.png',
						title: '第一章第一节',
						url: 'https://aqmore.sxpz.vip/动土作业.mp4',
						i: '1'
					},
					
				],
			}
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myVideo')
			console.log(this.videoContext)
		},
		onLoad(e) {
			if (uni.getStorageSync('user').nickname == 'yys' || uni.getStorageSync('user').nickname == undefined) {
				this.unckeck = 1;
				this.dataList = '';
				return;
			}
			this.url_now = e.fileurl
			this.title = e.filename
			this.uid = uni.getStorageSync('user').uid
			this.token = uni.getStorageSync('user').token
			this.getVideoList()
		},
		//页面卸载
		onUnload() {
			clearInterval(this.setterval)
		},
		computed:{
			isNefi(){
				if(uni.getStorageSync('user').nickname == 'yys' || uni.getStorageSync('user').nickname == undefined){
					return 1;
				}else{
					return 0;
				}
				
			}
		},
		methods: {
			getVideoList(){
				const that=this
				uni.request({
					url:'https://aqmore.sxpz.vip/AppApi/LibraryOnline/index?uid='+this.uid+'&token='+this.token,
					method: 'GET',
					header: {
						'content-type': 'application/x-www-form-urlencoded',
					},
					success:function(res){
						console.log(res)
						that.dataList=res.data.datas
					}
				})
			},
			toDetail(a) {
				console.log(a)
				this.i_now = a.index
				this.url_now = a.file_url
				console.log(a.file_url)
				this.title = a.filename
				
			},
			send() {
				var that = this
				this.setterval = setInterval(function() {
					console.log(that.nowTime)
				}, 3000)
			},
			play() { //开始
				console.log("开始")
				this.send()
			},
			pause() { //暂停
				console.log("暂停")
				var that = this
				clearInterval(this.setterval)
			},
			ended() { //结束
				console.log("结束")
			},
			waiting() { //缓冲
				console.log("缓冲")

			},
			forbidDragProgress(res) { //250ms访问一次
				let that = this
				// console.log(res)   
				let time = parseFloat(res.detail.currentTime); //当前播放时间
				this.nowTime = parseInt(res.detail.currentTime);
				// console.log(this.nowTime)
				if ((time - this.videoCurrentTime).toFixed(3) > 2) {

					console.log("被快进")
					clearInterval(this.setterval)
					let nowtime = this.videoCurrentTime.toFixed(0); //整数
					// console.log("nowtime:")
					// console.log(nowtime)
					this.videoContext.seek(this.initial_time);
					// console.log(this.videoContext)
					this.send()
					uni.showToast({
						title: '该视频为课程视频，无法快进',
						icon: 'none'
					})
				} else {
					this.videoCurrentTime = time;
				}
				// if(res.detail.currentTime==res.detail.duration){


				// }
			}


		}
	}
</script>

<style>
	page {

		width: 100%;
		height: 100%;
		/* background-color: #03182b; */
	}

	.card_list {
		background-color: #fff;
		box-shadow: 0 2upx 8upx 0 rgba(0, 0, 0, 0.06);
		border-radius: 20upx;
	}

	.font_color {
		color: #1afa29;
	}

	.siz_img {
		height: 100upx;
		width: 180upx;
		margin-left: 1%;

	}
</style>
